<template>
	<view class="product-order">
		<view class="delay">等待支付</view>
		<view class="address" @tap="addressClick">
			<view>{{name}} tel: {{tels}}</view>
			<view>收货地址: {{address}}</view>
		</view>
		<view class="product" v-if="cartList.length == 0">
			<view class="main">
				<view class="top">
					<view>订单编号</view>
					<view>等待支付</view>
				</view>
				<view class="product-center">
					<view class="product-left">
						<view class="imgs">
							<image :src="orderList.img" mode=""></image>
						</view>
						<view class="content">
							<view class="title">{{orderList.names || '柜子'}}</view>
							<view class="desc">
								<view>编号: {{orderList.skuId}}</view>
								<view>规格: {{orderList.type}}</view>
							</view>
						</view>
					</view>
					<view class="product-right">
						<view class="price">{{(orderList.price || 999) | priceFilter}}</view>
						<view class="price">×{{orderList.count || 1}}</view>
					</view>
				</view>
				<view class="product-bottom">
					<view class="main">
						<view class="price">合计: {{ (totalPrice || 999) | priceFilter}}</view>
						<view class="btn" @tap="confimClick">确认付款</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 判断一下 是批量提交订单 还是单独提交订单 -->
		<view class="product" v-else>
			<view class="main">
				<view class="top">
					<view>订单编号</view>
					<view>等待支付</view>
				</view>
				<view class="car_list_item" v-for="(item, index) in cartList" :key="index">
					<view class="product-center">
						<view class="product-left">
							<view class="imgs">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="content">
								<view class="title">{{item.title}}</view>
								<view class="desc">
									<view>编号{{item.sku_code}}</view>
									<view>规格{{item.cartId}}</view>
								</view>
							</view>
						</view>
						<view class="product-right">
							<view class="price">{{(item.price || 999) | priceFilter}}</view>
							<view class="price">×{{item.count || 1}}</view>
						</view>
					</view>

				</view>
				<view class="product-bottom">
					<view class="main">
						<view class="price">合计: {{ (totalPrice || 999) | priceFilter}}</view>
						<view class="btn" @tap="confimClick">确认付款</view>
					</view>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	import {
		getAddOrderBatch
	} from '@/network/cart/index.js'
	import {
		getAddressDetail
	} from '@/network/address/index.js'
	export default {
		data() {
			return {
				order: '',
				orderData: {},
				addressID: "",
				cartList: [],
				name: '',
				tels: '',
				address: '',
				types: ''
			};
		},
		computed: {
			...mapState(["orderList"]),
			// ...mapGetters(['totalPrice']),
			totalPrice() {
				
				return this.cartList.reduce((pre, val) => {
					return pre += val.count * val.price
				}, 0)
			}
		},
		onLoad(options) {
			console.log(this.$store.state.orderList, '哈哈')
			console.log(this.$store.state.carList, '哈哈1')
			this.types = options.type;
			// console.log(this.type, '类型')
			this.cartList = this.$store.state.carList;
			console.log(this.cartList)
			if (options.type == '商品详情') {
				this.cartList = []
			} else if (options.id) {
					console.log(options.id, 'options.id')
					getAddressDetail({
						id: options.id
					}).then(res => {
						console.log(res.data.data, '详细地址')
						const datas = res.data.data
						this.name = datas.name;
						this.tels = datas.tel;
						this.address = datas.cityStr + datas.cityBak;
						this.addressID = datas.id
					})
				
					
				
			}
			// 待支付页面  接口
			if (this.cartList.length == 0) {
				const obj = {
					userId: uni.getStorageSync('tokens').id,
					addressId: this.addressID, // 可以删除
					count: this.$store.state.orderList.count,
					price: parseInt(this.$store.getters.totalPrice / 100),
					'orderDetail[0].skuId': this.$store.state.orderList['orderDetail[0].skuId'],
					'orderDetail[0].price': parseInt(this.$store.getters.totalPrice / 100),
					'orderDetail[0].count': this.$store.state.orderList.count
				}
				console.log(obj, '1')
				this.orderData = obj
			} else {
				const lists = {};
				console.log(this.cartList)
				this.cartList.forEach((item, index) => {
					lists['orderDetail[' + index + '].skuId'] = item.id;
					lists['orderDetail[' + index + '].price'] = item.price
					lists['orderDetail[' + index + '].count'] = item.count
				})
				console.log(lists, 'list数据')
				const obj1 = {
					userId: uni.getStorageSync('tokens').id,
					addressId: this.addressID, // 可以删除
					count: this.$store.state.orderList.count,
					price: parseInt(this.$store.getters.totalPrice / 100),
					...lists
				}
				this.orderData = obj1
			}


		},
		methods: {
			addressClick() {
				console.log(this.types, '哈哈哈')
				if (this.types) {  // 解决一个小bug
					this.cartList = []
				} 
				uni.navigateTo({
					url: '/pages/address/address?type=' + 'select'
				})
			},
			async confimClick() {
				console.log(12)
				this.orderData.addressId = this.addressID
				const res = await getAddOrderBatch(this.orderData);
				console.log(res, '成功')
				if (res.data.code == 'S') {
					const orderId = res.data.orderId
					console.log(orderId)
					this.$store.commit('addOrderId', orderId)
					uni.navigateTo({
						url: `/pages/product/orderPay/orderPay?orderId=${orderId}&price=${this.totalPrice}`
					})
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}

			}
		},
		filters: {
			priceFilter(val) {
				return '¥' + (val / 100).toFixed(2)
			},

		},
		
	}
</script>

<style lang="scss" scoped>
	.product-order {
		height: 100vh;
		background-color: #F1ECE7;
		padding: 0 40rpx;

		.delay {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #999;
		}

		.address {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #999;

			view {
				font-size: 26rpx;
			}
		}

		.product {
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 32rpx;

			.main {
				// width: 336px;
				padding: 0 36rpx;

				.top {
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #F1ECE7;
				}

				.product-center {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 2rpx solid #F1ECE7;

					.product-left {
						display: flex;

						.imgs {
							width: 162rpx;
							height: 162rpx;
							background-color: pink;
							margin-right: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.content {
							.title {
								font-size: 28rpx;
								margin-bottom: 30rpx;
							}

							.desc {
								font-size: 24rpx;
								color: #8D8D8D;
							}
						}
					}

					.product-right {
						font-size: 26rpx;
					}
				}

				.product-bottom {
					display: flex;
					justify-content: flex-end;
					padding: 20rpx 0 40rpx;

					.main {
						font-size: 26rpx;

						.btn {
							padding: 10rpx;
							border: 2rpx solid #333;
							margin-top: 20rpx;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>
